const CorrelationPoint = (props) => {

  const randomNum = (min, max) => {
    const Range = max - min;
    const Rand = Math.random();
    const num = min + Math.round(Rand * Range);
    return num;
  };

  const getX = index => {
    let x = (1 / props.data.length) * 100 * index + '%';
    return x;
  };

  return (
    <div
      key={props.index}
      style={
        props.position === 'left' ?
          {
            position: 'absolute',
            top: randomNum(0, 400),
            left: getX(props.index),
            textAlign: 'center',
            fontSize: 12,
          } :
          {
            position: 'absolute',
            top: randomNum(0, 400),
            right: getX(props.index),
            textAlign: 'center',
            fontSize: 12,
          }
      }
    >
      <div
        style={{
          borderRadius: '50%',
          background: '#ffffff',
          margin: '0 auto',
          width: 14,
          height: 14,
          paddingTop: 2,
        }}
      >
        <div
          style={{
            width: 10,
            height: 10,
            borderRadius: '50%',
            background: props.index % 2 === 0 ? '#19D18F' : '#F8B551',
            margin: '0 auto',
          }}
        ></div>
      </div>
      {props.name}
    </div>
  )
}

export default CorrelationPoint
